<template>
  <div>
    <!-- id 的替代者 ref ,在VueComponent中定义的引用元素 -->
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">提示dom</button>
    <!-- ref 引用的school组件 -->
    <SchoolItem ref="sch"></SchoolItem>
  </div>
</template>

<script>
import SchoolItem from "./components/SchoolItem.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "马铃薯",
    };
  },
  components: {
    SchoolItem,
  },
  methods: {
    showDom() {
      console.log(this.$refs.title);
      console.log(this.$refs.btn);
      // 获取的是school组件对象
      console.log(this.$refs.sch);
    },
  },
};
</script>

<style></style>
